<script setup lang="ts">
import ClassificationList from '../components/classification/classificationList.vue';
import { ref, onMounted ,watch} from 'vue';
import classification from '../api/classification'
import ClassificationlistPagination from '../components/classification/classificationlistPagination.vue';
import { useClassificationListStore } from '../store/classificationList';
import { useAddClassificationStore } from '../store/addClassification';
import { useEditClassificationStore } from '../store/editClassification';
const classificationStore = useEditClassificationStore()
const addClassificationStore = useAddClassificationStore()
const classificationListStore = useClassificationListStore()
const Classification = ref<any[]>([])
const valueSelectClassification = ref('');
const options = [
    { value: 1, label: '启用' },
    { value: 0, label: '停用' },
];
const value = ref();
async function searchClassification() {
    console.log(valueSelectClassification.value)
    await classification.getSpecieClassification(classificationListStore.pageNum, classificationListStore.pageSize, valueSelectClassification.value, value.value).then((res) => {
        classificationListStore.classificationList = res.data.data
        classificationListStore.total = res.data.total
        console.log(res.data.data)
    }).finally(() => {
        classificationListStore.changeLoading()
    })
}
watch(()=>classificationStore.submit===true,async()=>{
    await classification.getClassification().then((res) => {
        Classification.value = res.data.data
    })
})
onMounted(async () => {
    await classification.getClassification().then((res) => {
        Classification.value = res.data.data
    })
    await classification.getClassificationCategory().then(res => {
        addClassificationStore.categoryList = res.data.data
    })

})
</script>

<template>
    <div class="classification">
        <el-card style="width: 80%">
            <template #header>
                <div class="card-header">
                    <div >
                        分类：<el-tree-select clearable v-model="valueSelectClassification" :data="Classification"
                            check-strictly :render-after-expand="false" style="width: 240px" />
                    </div>
                    <div >
                        状态：<el-select v-model="value" placeholder="请选择" style="width: 240px" clearable>
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <el-button type="primary" @click="searchClassification">查询</el-button>
                </div>
            </template>
            <ClassificationList />
            <template #footer>
                <ClassificationlistPagination />
            </template>
        </el-card>
    </div>
</template>

<style scoped>
.classification {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.input-with-select {
    width: 240px;
}
@media (max-width: 768px) {
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
</style>